<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>upload模块快速使用</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
</head>
<body>

<div class="layui-progress">
    <div class="layui-progress-bar" lay-percent="10%"></div>
</div>

<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function () {
        var element = layui.element;
    });
</script>

<input type="file" class="layui-btn" id="test1" name="image"/>
<button type="file" class="layui-btn">
    <i class="layui-icon">&#xe67c;</i>上传插件
</button>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>拖拽上传</legend>
</fieldset>

<div class="layui-upload-drag" id="test10">
    <i class="layui-icon"></i>
    <p>点击上传，或将文件拖拽到此处</p>
    <div class="layui-hide" id="uploadDemoView">
        <hr>
        <img src="" alt="上传成功后渲染" style="max-width: 196px">
    </div>
</div>
<script>
    layui.use(['upload', 'layer'], function () {
        var upload = layui.upload
            , layer = layui.layer;

        //执行实例
        var uploadInst = upload.render({
            //绑定元素
            elem: '#test1'
            //上传接口
            , url: '{:url("index/index/uploads")}'
            // 文件域的字段名 该属性省略时默认值为: file
            , field: 'file'
            , accept: 'file' //视频
            , exts: 'jpg|png|zip|rar|7z|mp4' //只允许上传压缩文件
            , size: 51200  //允许大小，最大50M
            , auto: true
            , progress: function (n, elem) {


                console.log("666"); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
            }
            //上传完毕回调
            , done: function (res) {
                // 返回结果
                console.log(res)
            }
            //请求异常回调
            , error: function () {

            }
        });

        //拖拽上传
        upload.render({
            elem: '#test10'
            , url: '{:url("index/index/uploads")}' //改成您自己的上传接口
            , done: function (res) {
                layer.msg('上传成功');
                // layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
                console.log(res)
            }
        });


    });


</script>
</body>
</html>